import { useEffect, useState } from "react";
import { ConfigProvider, theme, message } from "antd";
import zhCN from "antd/locale/zh_CN";

//路由模式
import {
  HashRouter,
  useNavigate,
  useLocation,
  useRoutes,
} from "react-router-dom";

// import RouterView from "@/router/index";
// import routes from "./router/routes";

//状态容器
import { Provider, useDispatch, useSelector } from "react-redux";
import store from "./store/index";

//引入上下文
import { themeContext } from "./themeContext.js";

//全屏
import { FullScreen, useFullScreenHandle } from "react-full-screen";

import styled from "styled-components";

//路由2测试
import routes2 from "@/router/routes2";
import RouterView2 from "@/router/index2";
import { useBeforeRouterEnter } from "@/router/index2";

//组件的过度动画
const RootDom = styled.div`
  width: 100vw;
  height: 100vh;
`;

const App = () => {
  const [messageApi, contextHolder] = message.useMessage();

  const [darkMode, setDarkMode] = useState(false); //暗黑模式，切换主体

  const [watermarkFlag, setWatermarkFlag] = useState(false); //水印切换，默认不显示

  const [isFullScreen, setFullScreen] = useState(false); //是否全屏

  const switchDarkMode = () => {
    setDarkMode(!darkMode);
  };

  const swtichWatermarkFlag = () => {
    setWatermarkFlag(!watermarkFlag);
  };

  const switchFullScreen = () => {
    setFullScreen(!isFullScreen);
  };

  // 创建一个fullScreen的handle
  const handle = useFullScreenHandle();

  const openMessage = (type = "success", content = "请传入内容", key) => {
    messageApi.open({
      type,
      content,
      key,
    });
  };

  return (
    <>
      {/* 上下文挂载全局通用简单的数据 */}
      <themeContext.Provider
        value={{
          darkMode,
          switchDarkMode,
          watermarkFlag,
          swtichWatermarkFlag,
          handle,
          isFullScreen,
          switchFullScreen,
          openMessage,
          messageApi,
        }}
      >
        <ConfigProvider
          locale={zhCN}
          theme={{
            //将所有基于该变量的颜色修改
            token: { colorPrimary: "#316C72FF" },
            components: {
              Breadcrumb: {
                iconFontSize: 16,
              },
            },
            algorithm: !darkMode ? theme.defaultAlgorithm : theme.darkAlgorithm,
          }}
        >
          {/* 组件通信的公共状态数据 */}
          <Provider store={store}>
            {/* 全屏组件 */}
            <FullScreen handle={handle}>
              {contextHolder}
              {/* 路由模式 */}
              <RootDom>
                {/* <HashRouter> */}
                {/* 路由表渲染位置 */}
                {/* 手搭路由表菜单闪烁无法解决 */}
                {/* <RouterView routes={routes}></RouterView> */}
                {/* 使用useRoutes */}
                <RouterView2></RouterView2>
                {/* {useRoutes(routes)}  */}
                {/* </HashRouter> */}
              </RootDom>
            </FullScreen>
          </Provider>
        </ConfigProvider>
      </themeContext.Provider>
    </>
  );
};

export default App;
